<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>WebSocket Logger</title>
  <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
  <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
  <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
</head>
<body>
<button onclick="openSocket()">开启日志</button>
<button onclick="closeSocket()">关闭日志</button>
<div id="log-container" style="height: 450px; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;">
  <div></div>
</div>
</body>
<script>
  var stompClient = null;
  $(document).ready(function () {
    openSocket();
  });

  function openSocket() {
    if (stompClient == null) {
      var socket = new SockJS('http://localhost:8084/websocket?token=kl');
      stompClient = Stomp.over(socket);
      stompClient.connect({token: "kl"}, function (frame) {
        stompClient.subscribe('/topic/pullLogger', function (event) {
          var content = JSON.parse(event.body);
          $("#log-container div").append(content.timestamp + " " + content.level + " --- [" + content.threadName + "] "
              + content.className + "   :" + content.body).append("<br/>");
          $("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
        }, {
          token: "kltoen"
        });
      });
    }
  }

  function closeSocket() {
    if (stompClient != null) {
      stompClient.disconnect();
      stompClient = null;
    }
  }
</script>
</body>
</html>